<!--
 * @Date: 2024-12-11 17:12:50
 * @Author: LiSong
 * @LastEditors: g05047
 * @LastEditTime: 2025-03-07 11:15:50
 * @Description: 
-->
<template>
  <div class="code-dialog-body">
    <div ref="editorRef"
      style="width:100%;height:100%"
      v-if="isFuncType">
      <div class="code-studio-alert">
        <span class="alert-title">function {{ eventName }} ({{ eventParams.join(', ') }}) {</span>
        <el-icon :size="16"
          style="cursor: pointer;"
          @click="toggleFullscreen">
          <FullScreen />
        </el-icon>
      </div>
      <CodeStudio v-model="codeState.content"
        :mode="mode" />
      <div class="code-studio-alert">
        <span class="alert-title">}</span>
      </div>
    </div>
    <div ref="editorCodeRef"
      v-else
      style="width:100%;height:100%">
      <div class="code-fullscreen">
        <el-icon :size="16"
          style="	cursor: pointer;"
          @click="toggleFullscreen">
          <FullScreen />
        </el-icon>
      </div>
      <CodeStudio v-model="codeState.content"
        :mode="mode" />
    </div>
  </div>
</template>
<script setup>
import { computed, reactive, watch } from 'vue';
import { CodeStudioDataType } from '@hp/config/pojo'
import { FullScreen } from '@element-plus/icons-vue'
import { pluginManager } from '@hp/utils/pluginManager.js'

const CodeStudio = pluginManager.attrEditors['code-studio']
const emits = defineEmits([
  'update:modelValue'
])
const props = defineProps({
  mode: { type: String, default: 'json' },
  codeType: { type: String },
  eventName: { type: String },
  eventParams: { type: Array, default: () => [] },
  modelValue: { type: String },
})
const codeState = reactive({
  content: props.modelValue,
})
const isFuncType = computed(() => {
  return CodeStudioDataType.FUNC.equals(props.codeType)
})
watch(
  () => props.modelValue,
  (nv) => {
    if (CodeStudioDataType.FUNC.equals(props.codeType)) {
      if (nv.startsWith('func:')) {
        nv = nv.replace('func:', '')
      }
      codeState.content = nv
    } else {
      codeState.content = nv
    }
  },
  { immediate: true }
)
watch(
  () => codeState.content,
  (nv) => {
    if (CodeStudioDataType.FUNC.equals(props.codeType)) {
      nv = 'func:' + nv
    } else {
      nv = nv.replace('func:', '')
    }
    emits('update:modelValue', nv)
  }
)
// 编辑器Ref对象
const editorRef = ref(null)
const editorCodeRef = ref(null)
const isFullscreen = ref(false)
// 保存原始父元素和样式
const originalParent = ref(null)
const originalStyle = ref({})
const originalCodeParent = ref(null)
const originalCodeStyle = ref({})
// 保存原始位置的下一个兄弟节点
const originalNextSibling = ref(null);
const originalCodeNextSibling = ref(null);
// 切换全屏和退出全屏
const toggleFullscreen = () => {
  const editorElement = isFuncType.value ? editorRef.value.parentElement : editorCodeRef.value.parentElement;
  const original = isFuncType.value ? { parent: originalParent, style: originalStyle, nextSibling: originalNextSibling }
    : { parent: originalCodeParent, style: originalCodeStyle, nextSibling: originalCodeNextSibling };
  if (isFullscreen.value) {
    if (editorElement.parentElement !== original.parent.value) {
      // 手动重置样式
      editorElement.style = {};
      Object.assign(editorElement.style, original.style.value);
      original.parent.value.insertBefore(editorElement, original.nextSibling.value);
      editorElement.scrollIntoView()
    }
  } else {
    // 进入全屏
    if (editorElement.parentElement !== document.body) {
      const height = isFuncType.value ? document.documentElement.clientHeight - 60 : document.documentElement.clientHeight;
      original.parent.value = editorElement.parentElement;
      original.style.value = { ...editorElement.style };
      original.nextSibling.value = editorElement.nextSibling;
      Object.assign(editorElement.style, {
        position: 'fixed',
        top: '0',
        left: '0',
        bottom: '0',
        width: `${window.innerWidth}px`,
        height: `${height}px`,
        zIndex: '9999',
        backgroundColor: '#fff'
      });
      document.body.appendChild(editorElement);
    }
  }
  isFullscreen.value = !isFullscreen.value;
};
</script>
<style lang="scss" scoped>
.code-dialog-body {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.switch-tool {
	display: flex;
	align-items: center;
	.tool-label {
		margin-right: 10px;
	}
}
.code-studio-alert {
	color: #909399;
	padding: 6px 8px;
	background-color: #f4f4f5;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
}
.code-fullscreen {
	background: #f4f4f5;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: right;
	padding: 5px 10px;
}
</style>